<template>
  <a-card>
    <a-row :gutter="24">
      <a-col :span="5">
        <a-select v-model:value="proposalNameOrCode" style="width: 35%">
          <a-select-option value="overtureName">提案名称</a-select-option>
          <a-select-option value="_id">提案编号</a-select-option>
        </a-select>
        <a-input
          v-model:value="filterRule.proposalNameOrCodeData"
          style="width: 65%"
        />
      </a-col>
      <a-col :span="5">
        <a-input
          v-model:value="filterRule.overtureName"
          placeholder="请输入提案人姓名"
        />
      </a-col>
      <a-col :span="5">
        <MySelect
          title="所属教代会"
          style="width: 100%"
          :fieldNames="{ label: 'label', value: 'label' }"
          :selectData="delegacySelect"
          @change="changeSelect('forTeachers', $event)"
        ></MySelect>
      </a-col>
      <a-col :span="5">
        <MySelect
          title="所属代表团"
          style="width: 100%"
          :fieldNames="{ label: 'label', value: 'label' }"
          :selectData="delegacySelect"
          @change="changeSelect('delegacy', $event)"
        ></MySelect>
      </a-col>
      <a-col :span="4">
        <a-radio-group v-model:value="auditType" button-style="solid">
          <a-radio-button :value="0">全部</a-radio-button>
          <a-radio-button :value="1">未审核</a-radio-button>
          <a-radio-button :value="2">已审核</a-radio-button>
        </a-radio-group>
      </a-col>
    </a-row>
    <a-row :gutter="24" style="margin-top: 10px">
      <a-col :span="5">
        <MySelect
          title="请选择工会"
          style="width: 100%"
          :fieldNames="{ label: 'label', value: 'label' }"
          :selectData="delegacySelect"
          @change="changeSelect('delegacy', $event)"
        ></MySelect>
      </a-col>
      <a-col :span="5">
        <MySelect
          title="请选择单位"
          style="width: 100%"
          :fieldNames="{ label: 'label', value: 'label' }"
          :selectData="delegacySelect"
          @change="changeSelect('delegacy', $event)"
        ></MySelect>
      </a-col>
      <a-col :span="5">
        <MySelect
          title="请选择立案结果"
          style="width: 100%"
          :fieldNames="{ label: 'label', value: 'label' }"
          :selectData="delegacySelect"
          @change="changeSelect('delegacy', $event)"
        ></MySelect>
      </a-col>
      <a-col :span="5">
        <a-button type="primary">
          <template #icon><SearchOutlined /></template>
          搜索
        </a-button>
      </a-col>
    </a-row>
  </a-card>
  <MyTable
    @reload="getTableList(menuData.code)"
    :loading="loading"
    :tableData="tableData"
    useNumber
    :columns="columns"
  />
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, h } from "vue";
import MySelect from "@/components/CommonDai/SelectSearch.vue";
import MyTable from "@/components/CommonDai/Table.vue";
import { getOverture, getOvertrueConfig } from "@/api/overtrue";
import { useRoute, useRouter } from "vue-router";
import { SearchOutlined } from "@ant-design/icons-vue";
import { Tag } from "ant-design-vue";

onMounted(() => {
  getOvertrueConfig(route.meta.menuId as string).then((res: any) => {
    menuCode.value = res.data.data[0].code;
    menuData.value = res.data.data[0];
    getTableList(menuData.value.code);
  });
});
/** 页面开始的时候根据路由的里面的菜单id去获取当前菜单应该获取的提案code 再根据code去获取对应的提案 */
const route = useRoute();
const router = useRouter();
const menuCode = ref(0);
const menuData = ref<any>({});

/** 筛选功能 */
const auditType = ref(0);
const proposalNameOrCode = ref("overtureName");
// 筛选字段的对象
const filterRule = reactive({
  proposalNameOrCodeData: "",
  overtureName: "",
  delegacy: "",
  forTeachers: "",
});
const delegacySelect = [
  {
    value: "delegacy0",
    label: "第一代表团",
  },
  {
    value: "delegacy1",
    label: "第二代表团",
  },
  {
    value: "delegacy2",
    label: "第三代表团",
  },
  {
    value: "delegacy3",
    label: "第四代表团",
  },
];
/** 全部的select组件的change触发后的事件 */
const changeSelect = (key: keyof typeof filterRule, value: any) => {
  filterRule[key] = value;
};
/** 表格数据渲染功能 */
const tableData = ref<any[]>([]);
/** 获取提案列表的函数 */
const getTableList = (code: number) => {
  menuCode.value = code;
  loading.value = true;
  getOverture({ code }).then((res: any) => {
    tableData.value = res.data.data;
    loading.value = false;
  });
};
const loading = ref(false);
const columns = ref([
  {
    title: "提案编号",
    dataIndex: "",
    align: "center",
    isShow: true,
    customRender: ({ index }: any) => {
      return `A0${index + 1}`;
    },
  },
  {
    title: "提案名称",
    dataIndex: "overtureName",
    isShow: true,
    align: "center",
    customRender: ({ text }: any) => {
      return h(
        "a",
        {
          onClick: () => {
            console.log(text);
          },
        },
        text
      );
    },
  },
  {
    title: "提案人",
    dataIndex: "overturePeople",
    align: "center",
    isShow: true,
  },
  {
    title: "提案类型",
    dataIndex: "overtureType",
    align: "center",
    isShow: true,
  },
  {
    title: "提案方式",
    dataIndex: "suggestMethod",
    align: "center",
    isShow: true,
  },
  {
    title: "届次",
    dataIndex: "forTeachers",
    align: "center",
    isShow: true,
  },
  {
    title: "代表团",
    dataIndex: "delegacy",
    align: "center",
    isShow: true,
  },
  {
    title: "提案状态",
    dataIndex: "codeName",
    isShow: true,
    align: "center",
    customRender: ({ record, text }: any) => {
      return h(Tag, { color: record.codeColor }, () => text);
    },
  },
  {
    title: "审核状态",
    dataIndex: "delegationAuditId",
    align: "center",
    isShow: true,
    customRender: ({ text }: any) => {
      return h(Tag, { color: text ? "red" : "green" }, () =>
        text ? "已拒绝" : "待审核"
      );
    },
  },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    isShow: true,
    customRender: ({ record }: any) => {
      return h(
        "a",
        {
          onClick: () => {
            menuData.value.code = record.code;
            router.push({
              name: "audit",
              params: { id: record._id },
            });
          },
        },
        "审核"
      );
    },
  },
]);
</script>

<style scoped lang="less">
:deep(.ant-col) {
  padding-left: 5px !important;
  padding-right: 5px;
}
:deep(svg) {
  vertical-align: middle;
}
</style>
